<template>
  <div id="single-div">
    <div>
      <label style="width: 20%">标题</label><input style="width: 90%" placeholder="请输入标题" v-model="ques.title"></input>
    </div>
    <div>
      <label style="width: 10%">选项</label>
      <div style="width: 100%;">
        <table border="2px solid" width="100%">
          <thead>
            <tr>
              <th width="20%">操作</th>
              <th width="80%">选项</th>
            </tr>
          </thead>
          <tbody id="ques-box">
            <tr v-for="(item, index2) in ques.options" :key="item">
              <td width="20%">
                <i class="el-icon-plus" style="float: left" @click="add()"></i>
                <i class="el-icon-minus" style="float: right" @click="remove()"></i>
              </td>
              <td width="80%">
                <input placeholder="输入选项" style="width: 99%" v-model.lazy="ques.options[index2]"/>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import Question from "@/assets/js/Question";

export default {
  name: "AddSingle",
  data() {
    return {
        ques:new Question(),
    }
  },
  props: {
    //表示的是传递下来的指针
    //目前这里还没有使用
    list: {
      type: Array,
      required: true,
    },
    //这里接收的仅仅是单选的
    editingList:{
      type: Array,
      required: true,
    }
  },
  computed:{

  },
  methods: {
    //添加选项
    add() {
      this.ques.options.push("测试" + Math.ceil((Math.random() * 100)))
    },
    //移除选项
    remove() {
      if (this.ques.options.length === 1) {
        this.$alert("最后一个选项不可删除");
        return;
      }
      this.ques.options.pop();
    }
  },
  watch: {
    list:{
      immediate: true,
      deep: true,
      handler(newVal,oldVal){
        while(newVal.length > this.editingList.length){
          this.editingList.push(false);
        }
        console.log(newVal.length,this.editingList.length);
      }
    }
  },
  mounted() {
    this.$bus.addType = QUES_STYLE.SINGLE;
    //构造一个新的问题对象
    this.$bus.addQues = this.ques;
  },
  beforeDestroy() {

  }
}
</script>

<style scoped>
#single-div{
  width: 100%;
  height: 100%;
  background-color: #c29e80;
  border: solid 2px yellow;
}
</style>